
import Taro, { Component } from '@tarojs/taro'
import {View, Text, Image} from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'

import './buy.scss'
import check_01 from "../../assets/img/check_01.png";
import check_02 from "../../assets/img/check_02.png";

import {IStoreProps} from '../../store/Stores'
import {formatNumber, getStorage, navigateBack, navigateTo, setStorage, showToast, wxH5Pay, articleType} from "../../utils/common";
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class FishBuy extends Component<IHomeProps> {
  constructor(props){
    super(props)
  }

  state = {
    checked: false,
    orderInfo: {}
  }

  componentWillMount () {
    let orderInfo = getStorage('orderInfo')
    if(Object.keys(orderInfo).length <= 0) { showToast('发生错误,请重新下单'); setTimeout(() => {navigateBack()}, 2000) }
    this.setState({ orderInfo })
  }

  checked() {
    this.setState({ checked: !this.state.checked })
  }

  link = (url: string) => {
    navigateTo(url)
  }

  placeOrder() {
    let { orderInfo: {productId, dayId, gradeId}, checked } = this.state
    let orderInfo = getStorage('orderInfo')
    // console.log(dayId)
    // console.log(gradeId)
    if(!dayId || !gradeId || !productId) { showToast('发生错误,请重新下单'); return }
    if(!checked) { showToast('请阅读并勾选《联合委托养殖协议》'); return; }
    let { fishStore } = this.props.stores
    fishStore.placeAnOrder({
      cultureCycleId: dayId,
      gradeId: gradeId,
      id: productId,
      callback: res => {
        if(!res.payParams) { showToast('系统支付错误,请稍后重试~'); return }
        orderInfo.orderId = res.id || '' // 订单ID
        setStorage('orderInfo', orderInfo)
        wxH5Pay(JSON.parse(res.payParams), () => {
          navigateTo('/pages/fish/buySuccess')
        })
      }
    })
  }

  render () {
    let { checked, orderInfo } = this.state
    return (
      <View className='fish-buy page-bg content-20'>
        <View className='list01__item'>
          <Image className='list01__img'  src={orderInfo.comImg} />
          <View className='list01__info'>
            <View className='list01__line'>
              <Text className='list01__date'>第{formatNumber(orderInfo.periodsNum)}期</Text>
              <Text className='list01__title'>{orderInfo.comName}</Text>
            </View>
            <View className='list01__line list01__line-i'>
             {/*  <View className='list01__i'>
                年收益({orderInfo.profit})
              </View>
              <View className='list01__i'>
                期限({orderInfo.productDays}天)
              </View> */}
            </View>
            <View className='list01__line list01__line-sk'>
              <View className='list01__line-price yuan'>{orderInfo.unitPrice}<Text className='small'>/条</Text> </View>
              <View className='list01__line-num'><Text className='small'>x</Text>{orderInfo.productNum}</View>
            </View>
          </View>
        </View>

        <View className='line-common'>
          <View className='line-common__title'>购买数量</View>
          <View className='line-common__con'>{orderInfo.productNum}<Text className='small'>条</Text> </View>
        </View>
        <View className='line-common'>
          <View className='line-common__title'>购买时长</View>
          <View className='line-common__con'>{orderInfo.productDays}<Text className='small'>天</Text> </View>
        </View>
        <View className='line-common'>
          <View className='line-common__title color-orange'>小计</View>
          <View className='line-common__con color-orange yuan fw'>{(orderInfo.productPrice || 0).toFixed(2)}</View>
        </View>


        <View className='servers-ht'>
          {
            checked&& <Image className='servers-ht__icon' onClick={this.checked.bind(this)} src={check_01} />
          }
          {
            !checked&& <Image className='servers-ht__icon' onClick={this.checked.bind(this)} src={check_02} />
          }
          <View className='servers-ht__tip'> 已阅读并同意<Text className='color-theme' onClick={this.link.bind(this,'/pages/mine/helpDetail?id='+articleType.userServiceAg)}>《联合养殖服务协议》</Text> </View>
        </View>

        <View className='circular-submit' onClick={this.placeOrder.bind(this)}>立即支付</View>
      </View>
    )
  }
}

export default FishBuy
